<template>
	<view class="browse">
		<view class="idle" @click="handlepopu">
			<image class="idle-top" src="../../../static/img/video.png" mode=""></image>
			<view class="idle-center">
				<text class="tit">盆栽转让，30大洋买的带不走阿斯顿发生</text>
				<p>
					<span class="p-one">￥15.0</span>
					<span class="p-two">
						<image class="p-img" src="../../../static/item/眼睛.png"></image>130
					</span>
					<span class="p-three">
						<image class="p-imgone" src="../../../static/tyh/消息.png"></image>13
					</span>
				</p>
			</view>
			<image class="idle-but" src="../../../static/tyh/more.png" mode=""></image>
		</view>
		<view class="but-popup">
			<uni-popup ref="popup" type="bottom" background-color="#fff">
				<view class="mes-liuyan">
					<view class="mes-top">
						<text class="one">留言 · 23</text>
						<text class="two">x</text>
					</view>
					<view class="mes-item">
						<view class="item-one">
							<image class="touxiang" src="../../../static/item/狗狗.jpg"></image>
						</view>
						<view class="item-tow">
							<text class="username">今晚打老虎 · 5天前</text>
							<p class="usermes">
								<span><span class="maijia">@卖家：</span>在武汉理工学校哪里啊？</span>
							</p>
							<view class="mes-item1">
								<view class="item-one">
									<image class="touxiang" src="../../../static/item/狗狗.jpg"></image>
								</view>
								<view class="item-tow">
									<text class="username">今晚打老虎 · 5天前</text>
									<span class="usersale">卖家</span>
									<p class="usermes">
										<span><span class="maijia">@卖家：</span>在武汉理工学校哪里啊阿斯顿发射点发射点发射点飞洒地方阿斯蒂芬？</span>
									</p>
								</view>
							</view>
							<view class="mes-item1">
								<view class="item-one">
									<image class="touxiang" src="../../../static/item/狗狗.jpg"></image>
								</view>
								<view class="item-tow">
									<text class="username">今晚打老虎 · 5天前</text>
									<span class="usersale">卖家</span>
									<p class="usermes">
										<span><span class="maijia">@卖家：</span>在武汉理工学校哪里啊？</span>
									</p>
								</view>
							</view>
						</view>
					</view>
					<view class="mes-item">
						<view class="item-one">
							<image class="touxiang" src="../../../static/item/狗狗.jpg"></image>
						</view>
						<view class="item-tow">
							<text class="username">今晚打老虎 · 5天前</text>
							<p class="usermes">
								<span><span class="maijia">@卖家：</span>在武汉理工学校哪里啊？</span>
							</p>
							<view class="mes-item1">
								<view class="item-one">
									<image class="touxiang" src="../../../static/item/狗狗.jpg"></image>
								</view>
								<view class="item-tow">
									<text class="username">今晚打老虎 · 5天前</text>
									<span class="usersale">卖家</span>
									<p class="usermes">
										<span><span class="maijia">@卖家</span>：在武汉理工学校哪里啊阿斯顿发射点发射点发射点飞洒地方阿斯蒂芬？</span>
									</p>
								</view>
							</view>
						</view>
					</view>
				</view>
			</uni-popup>
		</view>
	</view>

</template>

<script>
	import {
		reactive,
		ref,
	} from "vue";
	export default {
		setup() {
			let popup = ref()

			function handlepopu() {
				popup.value.open()
			}
			return {
				handlepopu,
				popup
			}
		}
	}
</script>

<style lang="less">
	.browse {
		width: 100%;
		height: 100vh;
		background-color: #dedede;

		.mes-liuyan {
			width: 100%;
			height: 80vh;

			.mes-top {
				display: flex;
				width: 100%;
				height: 6vh;
				text-align: center;
				line-height: 6vh;

				.one {
					margin-left: 50rpx;
					flex: 1;
				}

				.two {
					margin-right: 30rpx;

				}
			}

			.mes-item {
				width: 100%;
				display: flex;
				margin-top: 10rpx;
				padding: 30rpx 0;

				.touxiang {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-left: 20rpx;
				}

				.item-tow {
					flex: 1;
					margin-left: 20rpx;

					.username {
						width: 100%;
						height: 70rpx;
					}

					.usermes {
						margin-top: 5rpx;

						.maijia {
							color: red;
						}
					}

					.mes-item1 {
						width: 100%;
						display: flex;
						margin-top: 30rpx;

						.touxiang {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
							margin-left: 20rpx;
						}

						.item-tow {
							flex: 1;
							margin-left: 20rpx;

							.username {
								width: 100%;
								height: 70rpx;

							}

							.usersale {
								margin-left: 40rpx;
								background-color: rgb(240, 19, 255);
								color: #fff;
							}

							.usermes {
								margin-top: 5rpx;
							}

						}
					}
				}

			}
		}


		.idle {
			display: flex;
			height: 150rpx;
			margin-top: 20px;
			background-color: #fff;

			.idle-top {
				width: 100rpx;
				height: 100rpx;
				margin-top: 25rpx;
				margin-left: 20rpx;
			}

			.idle-center {
				margin-top: 35rpx;
				margin-left: 30rpx;

				// width: 90%;
				.tit {
					display: inline-block;
					width: 75%;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}

				.p-one {
					margin-right: 45rpx;
					margin-bottom: -5rpx;
				}

				.p-two {
					margin-right: 45rpx;
				}

				.p-img {
					width: 40rpx;
					height: 40rpx;
					margin-top: 5rpx;
					margin-bottom: -10rpx;
					margin-right: 15rpx;
				}

				.p-imgone {
					width: 40rpx;
					height: 40rpx;
					margin-top: 10rpx;
					margin-bottom: -10rpx;
					margin-right: 15rpx;
				}
			}

			.idle-but {
				width: 60rpx;
				height: 60rpx;
				margin-top: 45rpx;
				margin-right: 30rpx;
			}
		}
	}
</style>